<template>
	<view class="box">
		<u-popup v-model="show" mode="bottom" width="90%" height="600" borderRadius="54">
			<view class="d_f j_c_c a_i_c f_d_c">
				<view class="title">
					请输入购买手机号进行登录
				</view>

				<view style="margin-top: 50rpx;">
					<u-field v-model="mobile" label="手机号" placeholder="请填写手机号" maxlength="11" type="number">
					</u-field>
					<u-field v-model="code" label="验证码" placeholder="请填写验证码" type="number" maxlength="6">
						<u-button size="mini" slot="right" type="success" @click="getCode" shape="circle"
							:disabled="disabled">{{getCodeText}}
						</u-button>
					</u-field>
				</view>
				<image src="../../static/logins.png" mode="widthFix" style="600rpx;margin-top: 40rpx;" @click="login">
				</image>
			</view>


		</u-popup>
		<u-popup v-model="showx" mode="center" width="90%" height="700" borderRadius="54">

			<image src="../../static/zfb.png" mode="widthFix" style="width: 100%;position: relative;"></image>
			<view class="" style="width: 100%;text-align: center;position: absolute;margin-top: -230rpx;">
				<view class="" style="width: 100%;">
					<u-input v-model="content" type="text" placeholder-style="color:#565656" :border="border"
						style="width: 536rpx;margin: 0 auto;" />
				</view>

				<image src="../../static/zgbbt.png" mode="widthFix" style="width:536rpx;margin-top: 30rpx;"
					@click="viplingqu"></image>
			</view>


		</u-popup>
		<u-popup v-model="shows" mode="center" width="90%" borderRadius="54">

			<view class="">
				<image src="../../static/yhtop.png" mode="widthFix" style="width: 100%;position: relative;"></image>
				<view class="" style="position: absolute;top: 400rpx;">
					<u-radio-group v-model="value" @change="radioGroupChange" :wrap='true'>
						<u-radio @change="radioChange" v-for="(item, index) in listx" :key="index" :name="item.id">

							{{item.name}}
						</u-radio>

					</u-radio-group>

				</view>
				<image src="../../static/qd.png" mode="widthFix" style="width: 664rpx;" @click="lingqus"></image>

			</view>

		</u-popup>
		<image src="../../static/to.png" mode="widthFix" style="width: 100%;"></image>
		<view class="d_f a_i_c" style="position: absolute;top: 48rpx;left:30rpx ;">
			<image src="../../static/user.png" mode="widthFix" style="width: 72rpx;"></image>
			<view class="" style="margin-left: 22rpx;" v-if="openid">
				<view class="" style="color: white;font-size: 32rpx;">
					{{mobile}}
				</view>
			<!-- 	<view class="">
					<image src="../../static/change.png" mode="widthFix" style="width: 90rpx;" @click="loginout">
					</image>
				</view> -->
			</view>
			<view class="" style="margin-left: 22rpx;" v-else>
				<view class="" style="color: white;font-size: 32rpx;" @click="show=true">
					请登录......
				</view>
				<view class="">
					<image src="../../static/login.png" mode="widthFix" style="width: 90rpx;" @click="show=true">
					</image>
				</view>
			</view>

		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="" v-if="current==0">
			<view class="" v-if="!openid||xmlydata.length==0">
				<image src="../../static/no.png" mode="widthFix"
					style="width: 473rpx;margin-top: 113rpx;margin-left: 138rpx;"></image>
			</view>
			<view class="" v-else>
				<image src="../../static/xmly.png" mode="widthFix" style="width: 100%;"></image>
				<view class="" style="margin-top: -20rpx;">
					<view  v-for="(item,index) in xmlydata" :key="index" :class="index==xmlydata.length-1?'boss1':'boss'">

						<view class="" v-if="item.status==0||item.status==1||item.status==3||item.status==7"
							style="padding-bottom: 10rpx;">

							<image src="../../static/su.png" mode="widthFix" style="width: 610rpx;"></image>
							<view class="d_f" style="position: absolute;top: 0rpx;left: 60rpx;">
								<view class="d_f " style="color: #E31C19;font-weight: 800;">
									<view class="money">
										5
									</view>
									<view class="unit">
										元
									</view>
								</view>
								<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
									<view class="" style="text-align: left;color: #232323;font-weight: bold;">
										通用立减金
									</view>
									<view class=""
										style="text-align: left;font-size: 16rpx;color: #E31C19;margin-top: 13rpx;">
										有效期{{item.starttime}}-{{item.endtime}}
									</view>
								</view>
								<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
									<image src="../../static/nolinqu.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==0" @click="add(item.id)"></image>
									<image src="../../static/领取成功@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==1"></image>
									<image src="../../static/发券成功@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==3"></image>
										<image src="../../static/timeno.png" mode="widthFix" style="width: 100rpx;"
											v-if="item.status==7"></image>

								</view>
							</view>
						</view>
						<view class="" v-if="item.status==2||item.status==4||item.status==5||item.status==6"
							style="padding-bottom: 10rpx;">
							<image src="../../static/err.png" mode="widthFix" style="width: 610rpx;"></image>
							<view class="d_f" style="position: absolute;top: 0rpx;left: 60rpx;">
								<view class="d_f " style="color: #9A9A9A;font-weight: 800;">
									<view class="money">
										5
									</view>
									<view class="unit">
										元
									</view>
								</view>
								<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
									<view class="" style="text-align: left;color: #9A9A9A;font-weight: bold;">
										通用立减金
									</view>
									<view class=""
										style="text-align: left;font-size: 16rpx;color: #9A9A9A;margin-top: 13rpx;">
										有效期{{item.starttime}}-{{item.endtime}}
									</view>
								</view>
								<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
									<image src="../../static/发券失败@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==2"></image>
									<image src="../../static/已核销@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==4"></image>
									<image src="../../static/领取失败@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==5"></image>
									<image src="../../static/已到期@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==6"></image>
								</view>
							</view>
						</view>





					</view>


				</view>
				<view class="" style="height: 60rpx;">
					
				</view>
			</view>
		</view>
		<view class="" v-if="current==1||current==2">
			<view class="" v-if="!openid||tldata.length==0">
				<image src="../../static/no.png" mode="widthFix"
					style="width: 473rpx;margin-top: 113rpx;margin-left: 138rpx;"></image>
			</view>
			<view class="" v-else>
				<image src="../../static/tl.png" mode="widthFix" style="width: 100%;" v-if="current==1"></image>
				<image src="../../static/gzdt.png" mode="widthFix" style="width: 100%;" v-if="current==2"></image>
				<view class="" style="margin-top: -20rpx;">
					<view  v-for="(item,index) in tldata" :key="index" :class="index==tldata.length-1?'boss1':'boss'">

						<view class="" v-if="item.status==0||item.status==1||item.status==3||item.status==7"
							style="padding-bottom: 10rpx;">

							<image src="../../static/su.png" mode="widthFix" style="width: 610rpx;"></image>
							<view class="d_f" style="position: absolute;top: 0rpx;left: 60rpx;">
								<view class="d_f " style="color: #E31C19;font-weight: 800;">
									<view class="money" v-if="current==1">
										5
									</view>
									<view class="money" v-if="current==2">
										{{item.money}}
									</view>
									<view class="unit">
										元
									</view>
								</view>
								<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
									<view class="" style="text-align: left;color: #232323;font-weight: bold;">
										通用立减金
									</view>
									<view class=""
										style="text-align: left;font-size: 16rpx;color: #E31C19;margin-top: 13rpx;">
										有效期{{item.starttime}}-{{item.endtime}}
									</view>
								</view>
								<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
									<image src="../../static/nolinqu.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==0" @click="viplq(item.id)"></image>
									<image src="../../static/领取成功@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==1"></image>
									<image src="../../static/发券成功@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==3"></image>
										<image src="../../static/timeno.png" mode="widthFix" style="width: 100rpx;"
											v-if="item.status==7"></image>

								</view>
							</view>
						</view>
						<view class="" v-if="item.status==2||item.status==4||item.status==5||item.status==6"
							style="padding-bottom: 10rpx;">
							<image src="../../static/err.png" mode="widthFix" style="width: 610rpx;"></image>
							<view class="d_f" style="position: absolute;top: 0rpx;left: 60rpx;">
								<view class="d_f " style="color: #9A9A9A;font-weight: 800;">
									<view class="money">
										5
									</view>
									<view class="unit">
										元
									</view>
								</view>
								<view class="" style="margin-left: 70rpx;margin-top: 30rpx;">
									<view class="" style="text-align: left;color: #9A9A9A;font-weight: bold;">
										通用立减金
									</view>
									<view class=""
										style="text-align: left;font-size: 16rpx;color: #9A9A9A;margin-top: 13rpx;">
										有效期{{item.starttime}}-{{item.endtime}}
									</view>
								</view>
								<view class="d_f j_c_c a_i_c" style="margin-left: 64rpx;">
									<image src="../../static/发券失败@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==2"></image>
									<image src="../../static/已核销@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==4"></image>
									<image src="../../static/领取失败@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==5"></image>
									<image src="../../static/已到期@3x.png" mode="widthFix" style="width: 100rpx;"
										v-if="item.status==6"></image>
								</view>
							</view>
						</view>





					</view>


				</view>
			</view>
			<view class="" style="height: 60rpx;">
				
			</view>
		</view>



	</view>
</template>

<script>
	import {
		sendSms,
		checkSms,
		ljjList,
		wxLogin,
		ljjLq
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {
			return {
				content: '',
				border: true,
				showx: false,
				listx: [

				
				{
					value: "1931",
					label: "工商银行微信立减金"
				},
				
				{
					value: "3008",
					label: "招商银行微信立减金"
				},
				{
					value: "3009",
					label: "农业银行微信立减金"
				},
				{
					value: "3010",
					label: "建设银行微信立减金"
				},
				{
					value: "3011",
					label: "中国银行微信立减金"
				},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '1931',
				shows: false,
				list: [{
					name: '喜马拉雅'
				}, {
					name: '省心会员'
				}, {
					name: '广州地铁'
				},],
				current: 0,
				mobile: "",
				show: false,
				code: "",
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				openid: "", //是否登录
				proType: '',
				xmlydata: [],
				tldata: [],
				ljjid: "", //立减金id
				idx: "", //省心会员券id


			}
		},
		components: {

		},
		methods: {
			add(item) {
				this.shows = true
				this.ljjid = item


			},
			viplq(item) {
				
				this.idx = item
				if(this.current==1){
						this.showx = true
				}else if(this.current==2){
					uni.showLoading({
						title: '领取中，请稍等',
						mask: true
					});
					ljjLq({
						openid: this.openid,
						type: 3,
						id: this.idx,
						account: uni.getStorageSync('openidHF'),
						accountType: 2,
						bankType: 1
					
					}).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						}); //弹出提示框
						this.getdata()
					})
				}
			
			},
			viplingqu() {
				uni.showLoading({
					title: '领取中，请稍等',
					mask: true
				});
				ljjLq({
					openid: this.openid,
					type: 3,
					id: this.idx,
					account: this.content,
					accountType: 1,
					bankType: 2

				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					}); //弹出提示框
					this.getdata()
				})
			},
			lingqus() {
				uni.showLoading({
					title: '领取中，请稍等',
					mask: true
				});
				ljjLq({
					openid: this.openid,
					type: 3,
					id: this.ljjid,
					account: uni.getStorageSync('openidHF'),
					accountType: 2,
					bankType: this.value

				}).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					}); //弹出提示框
					this.shows=false
					this.getdata()
				})
			},
			change(index) {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					}); //弹出提示框

				} else {
					this.current = index;
					this.getdata()
				}

			},
			//推出登录
			loginout() {
				uni.clearStorage()
				this.openid = ''
				this.xmlydata = []
				this.tldata == []
			},
			//获取验证码
			getCode() {
				sendSms({
					mobile: this.mobile,

				}).then((res) => {
					this.disabled = true
					this.getCodeText = "发送中..." //发送验证码
					this.getCodeisWaiting = true;
					setTimeout(() => {
						//this.$common.msg('验证码已发送')
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框
						this.setTimer(); //调用定时器方法
					}, 1000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			getdatas(){
			
				
					ljjList({
						openid: this.openid,
						type: 3,
						proType: 2
					}).then((res) => {
						console.log(res)
						this.xmlydata = res.data
					
				
						for (var i in this.xmlydata) {
							if (this.xmlydata[i].status == 0) {
								if (Date.now() < this.xmlydata[i].starttime * 1000) {
									this.xmlydata[i].status = '7'
								}
							}
				
							this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
						}
				
					})
			
					
					ljjList({
						openid: this.openid,
						type: 3,
						proType:1
					}).then((res) => {
						console.log(res)
						this.tldata = res.data
						for (var i in this.tldata) {
							if (this.tldata[i].status == 0) {
								if (Date.now() < this.tldata[i].starttime * 1000) {
									this.tldata[i].status = '7'
								}
							}
				
							this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
						}
					})
				
					
					ljjList({
						openid: this.openid,
						type: 3,
						proType:3
					}).then((res) => {
						console.log(res)
						this.tldata = res.data
						for (var i in this.tldata) {
							if (this.tldata[i].status == 0) {
								if (Date.now() < this.tldata[i].starttime * 1000) {
									this.tldata[i].status = '7'
								}
							}
					
							this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
						}
					})
				
			},
			getdata() {
				if (this.current == 0) {
					this.proType = 2
					ljjList({
						openid: this.openid,
						type: 3,
						proType: this.proType
					}).then((res) => {
						console.log(res)
						this.xmlydata = res.data
					

						for (var i in this.xmlydata) {
							if (this.xmlydata[i].status == 0) {
								if (Date.now() < this.xmlydata[i].starttime * 1000) {
									this.xmlydata[i].status = '7'
								}
							}

							this.xmlydata[i].starttime = moment(this.xmlydata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.xmlydata[i].endtime = moment(this.xmlydata[i].endtime * 1000).format("YYYY-MM-DD")
						}

					})
				} else if (this.current == 1) {
					this.proType = 1
					ljjList({
						openid: this.openid,
						type: 3,
						proType: this.proType
					}).then((res) => {
						console.log(res)
						this.tldata = res.data
						for (var i in this.tldata) {
							if (this.tldata[i].status == 0) {
								if (Date.now() < this.tldata[i].starttime * 1000) {
									this.tldata[i].status = '7'
								}
							}

							this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
						}
					})
				}else if(this.current == 2){
					this.proType = 3
					ljjList({
						openid: this.openid,
						type: 3,
						proType: this.proType
					}).then((res) => {
						console.log(res)
						this.tldata = res.data
						for (var i in this.tldata) {
							if (this.tldata[i].status == 0) {
								if (Date.now() < this.tldata[i].starttime * 1000) {
									this.tldata[i].status = '7'
								}
							}
					
							this.tldata[i].starttime = moment(this.tldata[i].starttime * 1000).format(
								"YYYY-MM-DD")
							this.tldata[i].endtime = moment(this.tldata[i].endtime * 1000).format("YYYY-MM-DD")
						}
					})
				}

			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					wxLogin({
						code: code,
						type: 2,
						proid: ''
					}).then((res) => {
						if (res.code == 1) {
							console.log(res)

							uni.setStorageSync('openidHF', res.data.openidH5)
								


						}
					})
				} else {
					this.changes()
				}
			},
			changes() {
				// let local ='https://h5.2018sx.cn/billh5/' ; //获取当前页面地址作为回调地址

				let local = encodeURIComponent('https://h5.2018sx.cn/ljjlq/#/')

				let appid = 'wx56cb827300659f82'
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=${this.current}#wechat_redirect`
			},
			//点击登录
			login() {
				if (this.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					});
				} else if (this.mobie == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else {
					checkSms({
						mobile: this.mobile,
						captcha: this.code,
						type: 3
					}).then((res) => {
						this.show = false
						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
							this.mobile = uni.getStorageSync('mobile')
						this.openid = uni.getStorageSync('openid')
						this.getdata()
					})
				}

			}
		},
		onLoad(option) {
			if(option.current){
				this.current=option.current
			}else{
				this.current=this.getUrlCode('state')
			}
			if (uni.getStorageSync('openid')) {
				this.openid = uni.getStorageSync('openid')
				this.getdatas()
			}
			if (uni.getStorageSync('mobile')) {
				this.mobile = uni.getStorageSync('mobile')
				
			}
			let ua = window.navigator.userAgent.toLowerCase();
			//判断是不是微信
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				// 微信
				if (!uni.getStorageSync('openidHF'))
					this.checkWeChatCode()

			}
			//判断是不是支付宝
			if (ua.match(/AlipayClient/i) == "alipayclient") {
				//支付宝
			}

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.money {
		font-size: 90rpx;
	}

	.unit {
		margin-top: 70rpx;
	}

	.box {
		background-color: #FFF0E3;
		min-height: 100vh;
	}

	.title {

		font-size: 34rpx;

		font-weight: 400;
		color: #1A1A1A;
		margin-top: 50rpx;

	}
	.boss1{
		background-color: white;
		width: 662rpx;
		border-radius: 12rpx;
		margin: 0 auto;
		
		text-align: center;
		position: relative;
	}

	.boss {
		background-color: white;
		width: 662rpx;

		margin: 0 auto;

		text-align: center;
		position: relative;


	}
</style>